<template>
	<div class="workbench">
		<!-- 核心指标卡片区 -->
		<el-row :gutter="20" class="card-row">
			<el-col :span="6" v-for="(item, index) in cards" :key="item.title">
				<el-card shadow="hover" class="card" :class="`card-${index}`">
					<div class="card-content">
						<div class="card-left">
							<div class="card-title">{{ item.title }}</div>
							<div class="card-value">{{ item.value }}</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>



		<!-- 数据可视化图表区 -->
		<el-row :gutter="20" class="chart-row" style="margin-top: 20px;">
			<el-col :span="12">
				<el-card shadow="hover" class="chart-card">
					<div class="chart-title">生产趋势图</div>
					<div ref="lineChartRef" class="chart-container"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover" class="chart-card">
					<div class="chart-title">订单完成率</div>
					<div ref="pieChartRef" class="chart-container"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover" class="chart-card">
					<div class="chart-title">设备状态分布</div>
					<div ref="deviceChartRef" class="chart-container"></div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover" class="chart-card">
					<div class="chart-title">出货合格率趋势</div>
					<div ref="qualityChartRef" class="chart-container"></div>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const cards = ref([
	{ title: '总订单数', value: 256 },
	{ title: '生产进度', value: '75%' },
	{ title: '报工总数', value: 138 },
	{ title: '设备正常率', value: '98%' }
])

const lineChartRef = ref(null)
const pieChartRef = ref(null)
const deviceChartRef = ref(null)
const qualityChartRef = ref(null)

const chartRefs = [
	{ title: '生产趋势图', ref: 'lineChartRef' },
	{ title: '订单完成率', ref: 'pieChartRef' },
	{ title: '设备状态分布', ref: 'deviceChartRef' },
	{ title: '出货合格率趋势', ref: 'qualityChartRef' }
]

const initCharts = () => {
	// 生产趋势图
	const lineChart = echarts.init(lineChartRef.value)
	lineChart.setOption({
		tooltip: { trigger: 'axis' },
		xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
		yAxis: { type: 'value' },
		series: [{ data: [120, 200, 150, 80, 70], type: 'line', smooth: true }]
	})

	// 订单完成率
	const pieChart = echarts.init(pieChartRef.value)
	pieChart.setOption({
		tooltip: { trigger: 'item' },
		legend: { top: '5%', left: 'center' },
		series: [{
			type: 'pie',
			radius: ['40%', '70%'],
			data: [
				{ value: 1048, name: '已完成' },
				{ value: 735, name: '未完成' }
			]
		}]
	})

	// 设备状态分布
	const deviceChart = echarts.init(deviceChartRef.value)
	deviceChart.setOption({
		tooltip: { trigger: 'item' },
		legend: {
			top: 'bottom',  // 或者调整为 'center' / 'left' / 'right'
			left: 'center', // 居中
			orient: 'horizontal', // 水平布局
			itemWidth: 14,  // 图例小圆点宽度
			itemHeight: 14, // 图例小圆点高度
			textStyle: { fontSize: 12 },
		},

		series: [{
			type: 'pie',
			radius: ['40%', '70%'],
			data: [
				{ value: 80, name: '正常' },
				{ value: 15, name: '预警' },
				{ value: 5, name: '故障' }
			]
		}]
	})

	// 出货合格率趋势
	const qualityChart = echarts.init(qualityChartRef.value)
	qualityChart.setOption({
		tooltip: { trigger: 'axis' },
		xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月'] },
		yAxis: { type: 'value', min: 0, max: 100 },
		series: [{
			data: [98, 95, 97, 96, 99],
			type: 'line',
			smooth: true
		}]
	})
}

onMounted(() => {
	initCharts()
})
</script>

<style scoped>
.workbench {
	padding: 20px;
}

.card-row .card {
	text-align: center;
	border-radius: 12px;
}

.card-content {
	padding: 20px 0;
}

.card-title {
	font-size: 16px;
	color: #666;
}

.card-value {
	font-size: 24px;
	font-weight: bold;
	color: #333;
}

.chart-container {
	height: 300px;
	width: 100%;
}

.chart-title {
	font-weight: bold;
	margin-bottom: 10px;
	font-size: 16px;
}

.card-0 {
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	color: #fff;
}

.card-1 {
	background: linear-gradient(135deg, #43e97b, #38f9d7);
	color: #fff;
}

.card-2 {
	background: linear-gradient(135deg, #a18cd1, #fbc2eb);
	color: #fff;
}

.card-3 {
	background: linear-gradient(135deg, #f6d365, #fda085);
	color: #fff;
}

.card .card-content {
	padding: 20px 0;
}

.card .card-title {
	font-size: 16px;
	opacity: 0.9;
}

.card .card-value {
	font-size: 28px;
	font-weight: bold;
	margin-top: 10px;
}
</style>
  
